Home

Informatik 7

Einführung in HTML und CSS

HTML (Hypertext Markup Language) ist die Standardsprache für Webseiten. Sie wird benutzt um Texte zu strukturieren und Grafiken oder andere Medien in eine Webseite einzubauen. CSS (Cascading Stylesheets) dagegen ist eine Technik mit der die verschiedenen Objekte (Texte, Grafiken etc) einer Webseite formatiert werden können. Auf modernen Webseiten wird das gesamte Design über CSS gestaltet.

1. Die Grundstruktur einer HTML-Webseite

Bevor wir uns mit einzelnen Textobjekten beschäftigen, ist es wichtig zu verstehen, wie eine Webseite grundlegend aufgebaut ist. Stellt euch eine HTML-Datei wie ein großes Dokument vor, das nach bestimmten Regeln strukturiert ist.

Jede HTML-Datei beginnt mit ein paar wichtigen Zeilen:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
    <!-- Hier kommen später Links zu CSS-Dateien oder interne CSS-Regeln hin -->
</head>
<body>
    <!-- Hier kommt der sichtbare Inhalt unserer Webseite hin -->
</body>
</html>

Lasst uns diese Teile genauer ansehen:

  • <!DOCTYPE html>: Diese Zeile sagt dem Browser (also z.B. Chrome, Firefox oder Safari), dass es sich um ein HTML5-Dokument handelt, die aktuellste Version von HTML.
  • <html lang="de">...</html>: Dies ist das allererste und allerletzte Tag in eurem HTML-Dokument. Es umschließt die gesamte Webseite und sagt dem Browser, dass der Inhalt innerhalb dieser Tags in der Sprache Deutsch (lang="de") verfasst ist.
  • <head>...</head>: Dieser Bereich ist wie der "Kopf" eurer Webseite. Hier stehen Informationen, die für den Browser wichtig sind, aber nicht direkt auf der Webseite sichtbar sind.
    • <meta charset="UTF-8">: Legt fest, welche Zeichen verwendet werden können (damit Umlaute wie ä, ö, ü richtig dargestellt werden).
    • <meta name="viewport" ...>: Wichtig, damit die Webseite auf verschiedenen Geräten (Handy, Tablet, PC) gut aussieht.
    • <title>Meine erste Webseite</title>: Der Text, der hier steht, erscheint ganz oben im Browser-Tab oder im Fenster der Webseite.
    • In den <head>-Bereich fügen wir später auch unsere CSS-Regeln ein, damit der Browser weiß, wie die Seite aussehen soll.
  • <body>...</body>: Dies ist der "Körper" eurer Webseite und der wichtigste Bereich für uns. Alles, was ihr hier hineinschreibt, wird später auf der Webseite sichtbar sein: Texte, Bilder, Videos, Links und vieles mehr.

2. HTML: Das Skelett der Webseite – Textobjekte

HTML steht für HyperText Markup Language. Es ist das Skelett oder der Bauplan eurer Webseite. Mit HTML definieren wir die Inhalte und deren Bedeutung. Wir sagen dem Browser: "Das hier ist eine Überschrift!", "Das hier ist ein normaler Textabsatz!" oder "Das ist ein Link!".

Dafür verwenden wir sogenannte Tags. Ein Tag ist wie ein Etikett oder ein Befehl und sieht meistens so aus: <tagname>Inhalt</tagname>. Es gibt einen öffnenden Tag (<tagname>) und einen schließenden Tag (</tagname>). Der Inhalt steht dazwischen.

Konzentrieren wir uns auf die wichtigsten Textobjekte:

1. Überschriften (<h1> bis <h6>)

Überschriften sind extrem wichtig, um eure Texte zu strukturieren und lesbar zu machen. Stellt euch ein Buch vor – es hat Titel, Kapitelüberschriften, Unterüberschriften. Genauso funktioniert es im Web.

  • <h1> ist die wichtigste und größte Überschrift (oft der Haupttitel der Seite).
  • <h2> ist eine Unterüberschrift.
  • <h3> ist eine weitere Unterüberschrift, kleiner als <h2>, usw.
  • <h6> ist die kleinste Überschrift.

Beispiel:

See the Pen Untitled by Bernd Schiller (@Bernie14153) on CodePen.

Der Browser stellt diese von sich aus schon unterschiedlich groß dar, aber wir werden sie später mit CSS noch schöner machen können!

2. Absätze (<p>)

Der normale Text, den ihr auf einer Webseite lest, wird in Absätzen dargestellt. Dafür nutzen wir den <p>-Tag (p für "paragraph", also Absatz). Jeder Textabschnitt, der zusammengehört, sollte in einem eigenen <p>-Tag stehen.

Beispiel:

See the Pen Untitled by Bernd Schiller (@Bernie14153) on CodePen.

3. Hervorhebungen im Text (<strong> und <em>)

Manchmal wollt ihr einzelne Wörter oder Satzteile besonders hervorheben.

  • <strong>: Macht Text fett und kennzeichnet ihn als besonders wichtig.
  • <em>: Macht Text kursiv und kennzeichnet ihn als betont (Emphasis).

Beispiel:

See the Pen Untitled by Bernd Schiller (@Bernie14153) on CodePen.

3. CSS: Das Aussehen der Webseite – Textobjekte gestalten

CSS steht für Cascading Style Sheets. Wenn HTML das Skelett ist, dann ist CSS die Kleidung, die Farben und die Gestaltung der Webseite. Mit CSS sagen wir dem Browser, wie die Inhalte aussehen sollen: Welche Farbe hat der Text? Wie groß ist die Schrift? Soll die Überschrift in der Mitte stehen?

Wie binden wir CSS ein?

Für den Anfang ist es am einfachsten, CSS direkt im <head>-Bereich unserer HTML-Datei zu schreiben. Das nennt man "internes CSS". Später, bei größeren Webseiten, werden wir CSS in einer separaten Datei speichern ("externes CSS"), damit alles übersichtlicher bleibt.

See the Pen Untitled by Bernd Schiller (@Bernie14153) on CodePen.

Erklärung der CSS-Regeln:

Eine CSS-Regel besteht immer aus drei Teilen:

Selektor { Eigenschaft: Wert; }
  • Selektor: Sagt uns, welches HTML-Element wir ansprechen wollen (z.B. h1 für alle h1-Überschriften, p für alle Absätze oder body für den gesamten Inhalt der Seite).
  • Eigenschaft: Was wollen wir ändern? (z.B. color für die Textfarbe, font-size für die Schriftgröße, text-align für die Ausrichtung).
  • Wert: Welchen Wert soll die Eigenschaft bekommen? (z.B. blue für die Farbe, 20px für die Schriftgröße, center für die Ausrichtung).

Wichtige CSS-Eigenschaften für Textobjekte:

  • color: Definiert die Textfarbe (z.B. red, blue, #FF0000, rgb(255,0,0)).
  • font-family: Legt die Schriftart fest (z.B. Arial, Verdana, sans-serif).
  • font-size: Bestimmt die Größe des Textes (z.B. 16px, 1.2em). px steht für Pixel, em ist relativ zur Elternelement-Schriftgröße.
  • text-align: Richtet den Text aus (z.B. left, right, center, justify).
  • line-height: Steuert den Zeilenabstand (z.B. 1.5 für 1,5-fache Schriftgröße).
  • text-decoration: Fügt eine Dekoration hinzu (z.B. underline für unterstrichen, none um Unterstreichungen z.B. bei Links zu entfernen).
  • background-color: Setzt die Hintergrundfarbe für ein Element.
Externe Quellen:

Zusammenfassung

  • HTML: Ist das Gerüst eurer Webseite. Es definiert die Inhalte und deren Struktur (z.B. "Das ist eine Hauptüberschrift", "Das ist ein Textabsatz").
  • CSS: Ist das Aussehen und die Gestaltung eurer Webseite. Es sagt, wie die Inhalte dargestellt werden sollen (z.B. "Die Überschrift ist blau und mittig", "Der Absatz hat eine größere Schrift").

Mit HTML bauen wir die Bausteine, mit CSS bemalen und positionieren wir sie. Gemeinsam bilden sie die Basis für jede moderne Webseite!